<template>
    <div ref="myChart" style="width:100%;height:100%" id="myChart"></div>
</template>
<script>
    export default {
        name: '',
        props: {
            data: {
                type: Object,
                default() {
                    return {};
                },
            },
        },
        data: () => ({}),
        mounted() {
            setTimeout( () => {
              this.drawChart();
            }, 1000)
        },
        watch: {
            data () {
                this.drawChart();
            }
        },
        methods: {
            drawChart() {
                const {myChart} = this.$refs;
                if (myChart) {
                    const thisChart = this.$echarts.init(myChart);
                    const option = {
                        grid: {
                            top: this.data.position[0],
                            left: this.data.position[1],
                            right: this.data.position[2],
                            bottom: this.data.position[3],
                        },
                        tooltip: {
                            show : true,
                            //symbol: "none", //去掉圆点
                            trigger: 'axis',
                            backgroundColor: "rgba(255,255,255,0.85)", //设置背景图片 rgba格式
                            color: "black",
                            borderWidth: "1", //边框宽度设置1
                            borderColor: "gray", //设置边框颜色
                            textStyle: {
                                color: "black" //设置文字颜色
                            },
                        },
                        title: {
                            text: this.data.title,
                            textStyle: {
                                color: '#4EB2F2',
                                fontSize: 12,
                                fontWeight:100
                            },
                            top: 0,
                            left: this.data.position[1],
                        },
                        xAxis: {
                            type: 'category',
                            boundaryGap: false,
                            axisTick: {
                                show: false,
                                alignWithLabel: true,
                            },
                            axisLine: {
                                show: false,
                            },
                            axisLabel: {
                                color: '#069DFD',
                            },
                            data: this.data?.lineX,
                        },
                        yAxis: {
                            type: 'value',
                            boundaryGap: [0, '85%'],
                            axisLine: {
                                show: true,
                                lineStyle: {
                                    color: '#069DFD',
                                    width: 0.1,
                                },
                            },
                            axisLabel: {
                                color: '#069DFD',
                            },
                            splitLine: {
                                lineStyle: {
                                    color: '#069DFD',
                                    width: 0.1,
                                },
                            },
                        },
                        series: [{
                            data: this.data?.lineY,
                            type: 'line',
                            showSymbol: false,
                            areaStyle: {
                                opacity: 0.8,
                                color: this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: 'rgba(0,189,217,0.4)'
                                }, {
                                    offset: 1,
                                    color: 'rgba(8,16,58,0.5)'
                                }])
                            },
                            lineStyle: {
                                color: '#00FFFF',
                            },
                        }],
                    };
                    thisChart.setOption(option);
                    window.addEventListener('resize', () => {
                        thisChart.resize();
                    })
                }
            },
        },
    };
</script>
<style lang="less" scoped>

</style>
